<script setup lang="ts">
import { ref, defineProps } from 'vue';

const props = defineProps({
  routeId: {
    type: Number,
    required: true
  },
  showDetail: {
    type: Boolean,
    default: false
  }
});

// 发射事件
const emit = defineEmits(['close']);

// 关闭详情
const closeDetail = () => {
  emit('close');
};

// 路线详情数据
const routeDetails = {
  1: {
    title: '泉州古城文化一日游',
    days: [
      {
        day: 'Day 1',
        title: '开元寺 → 西街 → 泉州府文庙',
        schedule: [
          {
            time: '上午',
            activities: '开元寺山门 → 东西塔 → 大雄宝殿 → 千手观音殿'
          },
          {
            time: '中午',
            activities: '西街小吃（姜母鸭、面线糊、肉粽）'
          },
          {
            time: '下午',
            activities: '泉州府文庙 → 大成殿 → 状元坊 → 名宦祠'
          },
          {
            time: '傍晚',
            activities: '西街夜景 → 钟楼 → 小西埕 → 特色闽南菜晚餐'
          }
        ]
      }
    ]
  },
  2: {
    title: '泉州周边休闲度假2日游',
    days: [
      {
        day: 'Day 1',
        title: '清源山 → 泉州市区',
        schedule: [
          {
            time: '上午',
            activities: '清源山入口 → 老君岩 → 弥陀岩 → 观景台'
          },
          {
            time: '中午',
            activities: '山间农家乐（土鸡、山野菜）'
          },
          {
            time: '下午',
            activities: '清源山上寺庙群 → 弘一法师舍利塔 → 茶艺体验'
          },
          {
            time: '晚上',
            activities: '返回市区 → 入住酒店 → 西街夜游'
          }
        ]
      },
      {
        day: 'Day 2',
        title: '崇武古城 → 惠女湾',
        schedule: [
          {
            time: '上午',
            activities: '崇武古城城墙 → 古炮台 → 海神庙'
          },
          {
            time: '中午',
            activities: '崇武小镇海鲜餐（醉蟹、海蛎煎）'
          },
          {
            time: '下午',
            activities: '惠女湾沙滩 → 渔村风光 → 日落观景'
          },
          {
            time: '傍晚',
            activities: '返回市区 → 特产购买 → 结束行程'
          }
        ]
      }
    ]
  },
  3: {
    title: '泉州非遗文化体验之旅',
    days: [
      {
        day: 'Day 1',
        title: '南音体验 → 木偶戏表演 → 蕃薯粉制作',
        schedule: [
          {
            time: '上午',
            activities: '泉州南音艺术中心 → 南音表演欣赏 → 乐器体验'
          },
          {
            time: '中午',
            activities: '传统闽南菜馆（卤面、沙茶面）'
          },
          {
            time: '下午',
            activities: '泉州木偶剧团 → 提线木偶表演 → 木偶制作体验'
          },
          {
            time: '晚上',
            activities: '蕃薯粉作坊 → 传统制作工艺体验 → 品尝特色小吃'
          }
        ]
      }
    ]
  },
  4: {
    title: '泉州美食探索之旅',
    days: [
      {
        day: 'Day 1',
        title: '地方特色小吃 → 传统美食制作 → 美食街探索',
        schedule: [
          {
            time: '上午',
            activities: '鲤城区早餐（浮粿、面线糊、芋粿） → 中山路小吃'
          },
          {
            time: '中午',
            activities: '传统闽南菜馆（姜母鸭、卤面、土笋冻）'
          },
          {
            time: '下午',
            activities: '传统糕点制作坊 → 肉粽制作体验 → 茶艺品茗'
          },
          {
            time: '晚上',
            activities: '西街美食探索 → 海鲜大排档 → 特色甜品'
          }
        ]
      }
    ]
  },
  5: {
    title: '世遗文化深度游（2天）',
    days: [
      {
        day: 'Day 1',
        title: '清源山 → 泉州少林寺 → 西街',
        schedule: [
          {
            time: '上午',
            activities: '清源山入口 → 老君岩造像 → 沿途古迹（如弥陀岩、弘一法师舍利塔）'
          },
          {
            time: '中午',
            activities: '清源山脚下餐厅（面线糊、肉粽）'
          },
          {
            time: '下午',
            activities: '泉州少林寺 → 演武堂武术表演 → 寺院建筑群参观'
          },
          {
            time: '晚上',
            activities: '西街钟楼 → 小西埕 → 侯阿婆烧肉粽 / 斯丹姜母鸭 → 开元寺外围夜景'
          }
        ]
      },
      {
        day: 'Day 2',
        title: '开元寺 → 天后宫 → 德济门遗址 → 蟳埔渔村',
        schedule: [
          {
            time: '上午',
            activities: '开元寺山门 → 东西塔 → 大雄宝殿 → 甘露戒坛'
          },
          {
            time: '中午',
            activities: '西街 / 钟楼附近闽南菜馆（临家闽南菜）'
          },
          {
            time: '下午',
            activities: '天后宫（妈祖庙） → 德济门遗址（古城墙残迹）'
          },
          {
            time: '傍晚',
            activities: '蟳埔渔村码头 → 蚵壳厝民居 → 簪花围体验店 → 海滩拍照'
          }
        ]
      }
    ]
  },
  6: {
    title: '开元寺-天后宫一日游',
    days: [
      {
        day: 'Day 1',
        title: '开元寺 → 天后宫 → 德济门遗址',
        schedule: [
          {
            time: '上午',
            activities: '开元寺山门 → 东西塔 → 大雄宝殿 → 千手观音殿'
          },
          {
            time: '中午',
            activities: '西街小吃（姜母鸭、面线糊、土笋冻）'
          },
          {
            time: '下午',
            activities: '天后宫（妈祖庙） → 祈福活动 → 文物展厅'
          },
          {
            time: '傍晚',
            activities: '德济门遗址 → 古城墙遗迹 → 周边历史街区'
          }
        ]
      }
    ]
  },
  7: {
    title: '滨海风光休闲游（2天）',
    days: [
      {
        day: 'Day 1',
        title: '崇武古城 → 月亮湾 → 惠安县/市区住宿',
        schedule: [
          {
            time: '上午',
            activities: '崇武古城南门 → 古城墙 → 古炮台 → 海门深处景点'
          },
          {
            time: '中午',
            activities: '崇武古城外海鲜餐厅（清蒸鱼、炒海瓜子）'
          },
          {
            time: '下午',
            activities: '月亮湾沙滩 → 游泳 / 冲浪 / 踏浪 → 沿海步道散步'
          },
          {
            time: '晚上',
            activities: '附近酒店休息或惠安县夜市（海鲜烧烤）'
          }
        ]
      },
      {
        day: 'Day 2',
        title: '石狮黄金海岸 → 永宁古卫城 → 洛伽寺',
        schedule: [
          {
            time: '上午',
            activities: '黄金海岸度假区 → 沙滩漫步 → 游艇出海体验'
          },
          {
            time: '中午',
            activities: '黄金海岸附近海鲜餐厅（龙虾、花蛤等）'
          },
          {
            time: '下午',
            activities: '永宁古卫城城门 → 老街（宁锦路） → 城隍庙'
          },
          {
            time: '傍晚',
            activities: '洛伽寺（礁石上的寺庙） → 海上日落观赏 → 返回市区'
          }
        ]
      }
    ]
  },
  8: {
    title: '崇武古城-月亮湾一日游',
    days: [
      {
        day: 'Day 1',
        title: '崇武古城 → 月亮湾 → 返回市区',
        schedule: [
          {
            time: '上午',
            activities: '崇武古城南门 → 古城墙 → 古炮台 → 海神庙'
          },
          {
            time: '中午',
            activities: '崇武渔村海鲜餐（醉蟹、海蛎煎、沙茶面）'
          },
          {
            time: '下午',
            activities: '月亮湾沙滩 → 海边漫步 → 摄影 → 水上活动'
          },
          {
            time: '傍晚',
            activities: '海边日落观赏 → 返回市区 → 特产购买'
          }
        ]
      }
    ]
  },
  9: {
    title: '亲子欢乐游（3天）',
    days: [
      {
        day: 'Day 1',
        title: '泉州木偶剧团 → 泉州科技馆 → 领SHOW天地',
        schedule: [
          {
            time: '上午',
            activities: '木偶剧团嘉礼馆 → 提线木偶 / 掌中木偶表演'
          },
          {
            time: '中午',
            activities: '剧团附近小吃店（炸醋肉、麻粩）'
          },
          {
            time: '下午',
            activities: '泉州科技馆（负1层儿童科学乐园 → 2层宇宙与海洋展厅）'
          },
          {
            time: '晚上',
            activities: '领SHOW天地创意街区 → 晚餐（创意菜）+ 逛手作店'
          }
        ]
      },
      {
        day: 'Day 2',
        title: '泉州博物馆 → 东湖公园 → 夜市/酒店',
        schedule: [
          {
            time: '上午',
            activities: '泉州博物馆（历史展厅 → 海丝文化展区）'
          },
          {
            time: '中午',
            activities: '博物馆周边餐厅（适合儿童的闽南菜）'
          },
          {
            time: '下午',
            activities: '东湖公园北门 → 游船码头 → 游乐场（旋转木马、小火车）'
          },
          {
            time: '晚上',
            activities: '东湖夜市或酒店附近餐厅 → 休息'
          }
        ]
      },
      {
        day: 'Day 3',
        title: '海丝野生动物世界 → 市区购纪念品 → 返程',
        schedule: [
          {
            time: '上午',
            activities: '动物园入口 → 草食动物区（长颈鹿、斑马） → 猛兽区（老虎、狮子）'
          },
          {
            time: '中午',
            activities: '动物园内餐厅（简餐）或自带午餐'
          },
          {
            time: '下午',
            activities: '市区中山路（买木偶、锡雕） → 关岳庙周边伴手礼店 → 返程'
          }
        ]
      }
    ]
  },
  10: {
    title: '泉州博物馆-东湖公园亲子游',
    days: [
      {
        day: 'Day 1',
        title: '泉州博物馆 → 东湖公园 → 市区',
        schedule: [
          {
            time: '上午',
            activities: '泉州博物馆（历史文物展厅 → 海丝文化展区 → 互动体验区）'
          },
          {
            time: '中午',
            activities: '博物馆周边餐厅（闽南特色儿童套餐）'
          },
          {
            time: '下午',
            activities: '东湖公园 → 游船体验 → 儿童游乐场 → 亲子互动区'
          },
          {
            time: '傍晚',
            activities: '东湖夜市 → 特色小吃 → 儿童玩具店'
          }
        ]
      }
    ]
  }
};
</script>

<template>
  <div v-if="showDetail" class="route-detail-overlay" @click="closeDetail">
    <div class="route-detail-container" @click.stop>
      <div class="route-detail-header">
        <h2>{{ routeDetails[routeId]?.title || '线路详情' }}</h2>
        <button class="close-btn" @click="closeDetail">×</button>
      </div>
      
      <div class="route-detail-content" v-if="routeDetails[routeId]">
        <div v-for="(day, index) in routeDetails[routeId].days" :key="index" class="day-container">
          <div class="day-header">
            <span class="day-tag">{{ day.day }}</span>
            <h3 class="day-title">{{ day.title }}</h3>
          </div>
          
          <div class="schedule-container">
            <div v-for="(item, idx) in day.schedule" :key="idx" class="schedule-item">
              <div class="time-tag">{{ item.time }}</div>
              <div class="activities">{{ item.activities }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="route-detail-footer">
        <button class="book-btn">立即预订</button>
        <button class="add-to-cart-btn">加入购物车</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.route-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.route-detail-container {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.route-detail-header {
  padding: 20px;
  background: linear-gradient(135deg, #3498db, #2c3e50);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.route-detail-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.3s ease;
}

.close-btn:hover {
  transform: rotate(90deg);
}

.route-detail-content {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

.day-container {
  margin-bottom: 30px;
}

.day-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.day-tag {
  background: #3498db;
  color: white;
  padding: 5px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  margin-right: 15px;
}

.day-title {
  margin: 0;
  color: #2c3e50;
  font-size: 1.3rem;
}

.schedule-container {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
}

.schedule-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd;
}

.schedule-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.time-tag {
  background: #e9f2fe;
  color: #3498db;
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.9rem;
  min-width: 60px;
  text-align: center;
  margin-right: 15px;
}

.activities {
  flex-grow: 1;
  line-height: 1.6;
}

.route-detail-footer {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
}

.book-btn, .add-to-cart-btn {
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.book-btn {
  background: #e74c3c;
  color: white;
  flex-grow: 1;
  margin-right: 10px;
}

.book-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(231, 76, 60, 0.3);
}

.add-to-cart-btn {
  background: #3498db;
  color: white;
  flex-grow: 1;
  margin-left: 10px;
}

.add-to-cart-btn:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(52, 152, 219, 0.3);
}

@media (max-width: 768px) {
  .route-detail-container {
    width: 95%;
    max-height: 85vh;
  }
  
  .route-detail-header h2 {
    font-size: 1.3rem;
  }
  
  .day-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .day-tag {
    margin-bottom: 10px;
  }
  
  .schedule-item {
    flex-direction: column;
  }
  
  .time-tag {
    margin-bottom: 10px;
    align-self: flex-start;
  }
  
  .route-detail-footer {
    flex-direction: column;
  }
  
  .book-btn, .add-to-cart-btn {
    width: 100%;
    margin: 0;
  }
  
  .book-btn {
    margin-bottom: 10px;
  }
}
</style>